<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>星云v1.0</title>

	<script src="js/vue.min.js"></script>
    <script src="js/vue-resource.min.js"></script>

    <style>
    	body{
    		background: #000;
    		margin: 0px;
    		color:#000;
    	}
    	/*html{
    		overflow: hidden;
    	}*/

    	body,html{
    		height: 100%;
    	}
    	#app,.c1{
    		height: 100%;

    	}


    	.c1{
    		display: grid;
    		grid-template-columns: 70% auto;
    		margin-left: 10%;
  margin-right: 10%;
  marg/*in-top: 10px;
  margin-bottom: 10px;*/
  color: #fff;
  text-align: center;
  grid-column-gap: 10px;
    	}
    	.c1 div div .t{
    		line-height: 38px;
    		background: #676b6f;
    	}
    	.c2{
    		display: grid;
    		grid-template-columns: 50% 50%;
    		grid-column-gap: 3px;
    	}
    	.c1 div div{
    		background: #2e2f2f;
    	}
    	.submit{
    		line-height: 38px;
    		background: #676b6f !important;
color: #fff;
border-radius: 10px;
    	}

.k1{
	background: #676b6f !important;
}
.k2{
	background: red !important;
}

    	.r{
    		background: #2e2f2f;
    	}
    	a{text-decoration: none;}
    	.cc div{
    		margin: 3px;
    		background: aliceblue !important;
    		color: #004cff;
    		text-align: left;
    		padding-left: 5px;
  padding-right: 5px;
  font-size: 12px;
    	}

.c7{
	display: grid;
	grid-template-rows: 10px auto 10px;
	height: 100%;
}

.t{
	color: #fff;
}
.cc10{
	display: grid;
	grid-template-columns: 50px auto;
	margin: 10px;margin-bottom: 15px;
}
.cc10 div{
color: #fff;
}
select{
	width: 100%;
}
.r{
	padding: 5px;
}


    </style>

</head>
<body>

<div id="app">
	
	<div class="c7">
		<div></div>
		<div class="c1">
			<div class="c2">
				<div>
					<div class="t">URL</div>
					<div class="cc">
						<div v-for="vurl in url">{{vurl}}</div>
						
					</div>
				</div>
				<div>
					<div class="t">OPENLINK</div>
					<div class="cc">
						<div v-for="vop in op">{{vop}}</div>
						
					</div>
				</div>
			</div>
			<div class="r">
				<div class="cc10">
					<div>数量：</div>
					<div>
						<select id="fruit" v-model="sum" name="fruit">
						    <option value="0">0</option>
						    <option value="2">3</option>
						    <option value="9">10</option>
						    <option value="49">50</option>
						    <option value="99">100</option>
						</select>
					</div>
				</div>
				<div v-if="status" @click="onclick()" class="submit k1">执行</div>
				<div v-else @click="" class="submit k2">执行中</div>
			</div>
		</div>
		<div></div>
	</div>
</div>



<script>
    var vm = new Vue({
		el: '#app',
		data() {
            return {
    			url:[],
    			op:[],
    			status:1,
    			cout:0,
    			sum:0
            }
		},
		created(){
		   
		},
		mounted(){
		    
		},
		methods: {
		    onclick(){
		    	
		    	if(this.status==1){
		    		this.status=0
		    		this.$http.get('http://127.0.0.1:8091').then(function(res){
                    	
	                    this.url.push(res.body.url);
	                    this.op.push(res.body.option);
	                  
	                    console.log(this.url)
	                    this.status=1
	                    if(this.sum > 0){
		                    if (this.cout < this.sum) {

		                    	this.cout++;
		                    	this.onclick()

		                    }
		                }
	                    // console.log(this.cout)
	                    
	                    
	                },function(){
	                    console.log('请求失败处理');
	                });
		    	}
			    
		    	
		    }
		}
	})
</script>

</body>
</html>